<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>EGW200</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .form-container {
          display: flex;
          flex-direction: column;
          width: 100%;
          max-width: 800px;
          margin: 0 auto;
        }
        .form-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
        }
        .form-column {
          flex: 1;
          margin: 0 10px;
        }
        .form-column h3 {
          margin-bottom: 10px;
        }
        .form-field {
          margin-bottom: 10px;
        }
    </style>
    <link rel="icon" href="./img/favicon.ico">
    <script src="js/common.js"></script>
    <script src="js/device.js"></script>
</head>

<body>
<div class="home-base">
    <div class="header-base">
        <!-- <img class="header-logo" src="./img/logoBlack.png"> -->
        <div class="header-menu" onclick="menuClick(this)">
        </div>
    </div>
    <div class="content-base flex">
        <div class="left-base" id="leftMenu">
<!--            <div class="left-title">系统菜单</div>-->
            <ul>
                <li>
                    <a href="index.html" id="idLeftMenuHome" class="">系统状态</a>
                </li>
                <li>
                    <a href="network.html" id="idLeftMenuNetwork" class="">网络设置</a>
                </li>
                <li>
                    <a href="wlan.html" id="idLeftMenuWLAN" class="">Wi-Fi设置</a>
                </li>
<!--                <li>-->
<!--                    <a href="">流量统计</a>-->
<!--                </li>-->
                <li>
                   <a href="device.html" id="idLeftMenuDevice" class="">网关功能</a>
                </li>
                <li>
                    <a href="ota.html" id="idLeftMenuOTA" class="">固件更新</a>
                </li>
            </ul>
        </div>
        <div class="right-base">
            <div class="page-header">
                <span class="header-title-one" onclick="selectTitle(this),selectContent('devInfoShow')">基础信息</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('mqttShow')">MQTT</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('serialShow')">串口</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('loraShow'),getLoraConfig()">射频 Lora</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('dateShow'),getDateTime(),getSNTPConfig()">时间</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('ioShow'),getIOStatus()">IO功能</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('cidsShow'),subdevGetCids()">采集点</span>
                <span> | </span>
                <span class="header-title-one" onclick="selectTitle(this),selectContent('debugShow')">命令调试</span>
            </div>
            <div class="page-content" id="devInfoShow">
                <div class="page-title">设备信息</div>
                <div class="page-detail">

                    <div class="line-base">
                        <span class="title">网络ID</span>
                        <input class="content" id="device-mesh-id" maxlength="12" placeholder="请输入 12 位数字的网络ID">
                        <div class="line-base-btn">
                            <button class="" onclick="postSaveDeviceMESHID()">保存</button>
                        </div>
                    </div>
                    <div class="line-base">
                        <span class="title">设备名称</span>
                        <input class="content" id="device-name" maxlength="32" type="text" placeholder="设备名称" />
                        <div class="line-base-btn">
                            <button class="" onclick="postSaveDeviceName()">保存</button>
                        </div>
                    </div>
                    <div class="line-base">
                        <span class="title">位置</span>
                        <input class="content" id="device-position" maxlength="32" type="text" placeholder="位置信息" />
                        <div class="line-base-btn">
                            <button class="" onclick="postSaveDevicePosition()">保存</button>
                        </div>
                    </div>
                    <div class="line-base">
                        <span class="title">SN</span>
                        <input class="content" id="device-sn" maxlength="12"/>
                        <div class="line-base-btn">
                            <button class="" onclick="postSaveDeviceSN()">保存</button>
                        </div>
                    </div>
                    <div class="line-base">
                        <span class="title">事件数量</span>
                        <span id="device-trigger-num"></span>
                    </div>
                    <div class="line-base">
                        <span class="title">情景数量</span>
                        <span id="device-scenes-num"></span>
                    </div>
                </div>
            </div>
            <div class="page-content" id="mqttShow">
                <div class="page-title">以下您可以对 MQTT 进行基本设置</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">状态</span>
                        <span id="mqtt-status"></span>
                    </div>
                    <div class="line-base">
                        <span class="title">地址</span>
                        <input class="content" id="mqtt-url" maxlength="128" type="text" placeholder="MQTT服务器地址" />
                    </div>
                    <div class="line-base">
                        <span class="title">端口</span>
                        <input class="content" id="mqtt-port" maxlength="16" type="text" placeholder="MQTT服务器端口" />
                    </div>
                    <div class="line-base">
                        <span class="title">用户名</span>
                        <input class="content" id="mqtt-username" maxlength="32" type="text" placeholder="MQTT用户名" />
                    </div>
                    <div class="line-base">
                        <span class="title">密码</span>
                        <input class="content" id="mqtt-password" maxlength="128" type="text" placeholder="MQTT密码" />
                    </div>
                    <div class="line-base-btn">
                        <button class="save-btn" id="save-params-config" onclick="postSaveMQTTConfig()">保存</button>
                    </div>
                </div>
            </div>
            <div class="page-content" id="serialShow">
                <div class="page-title">串口</div>
                <div class="page-detail">

                    <div class="line-base">
                        <span class="title">串口号</span>
                        <select class="content" id="select-serial-node" onchange="selectSerialNode(this)">
                            <option value="0">0</option>
                            <option value="1">1</option>
                        </select>
                    </div>
                    <div class="line-base">
                        <span class="title">波特率</span>
                        <select class="content" id="params-select-serial-baudrate">
                            <option value="600">600</option>
                            <option value="1200">1200</option>
                            <option value="2400">2400</option>
                            <option value="4800">4800</option>
                            <option value="9600" selected>9600</option>
                            <option value="14400">14400</option>
                            <option value="19200">19200</option>
                            <option value="38400">38400</option>
                            <option value="56000">56000</option>
                            <option value="57600">57600</option>
                            <option value="115200">115200</option>
                            <option value="128000">128000</option>
                            <option value="921600">921600</option>
                            <option value="1000000">1000000</option>
                        </select>
                    </div>
                    <div class="line-base">
                        <span class="title">数据位</span>
                        <select class="content" id="params-select-serial-parity">
                            <option value="N">无校验</option>
                            <option value="E">偶校验</option>
                            <option value="O" >奇校验</option>
                        </select>
                    </div >
                    <div class="line-base-btn">
                        <button class="save-btn" id="save-serial-config" onclick="postSaveSerialConfig()" >保存</button>
                    </div>
                </div>
            </div>

            <div class="page-content" id="loraShow">
                <div class="page-title">Lora设置</div>
                <div class="page-detail">

                    <div class="line-base">
                        <span class="title">启用</span>
                        <input type="checkbox" id="lora-enable"></checkbox>
                        <span>开启后RS485-2将不可用</span>
                    </div>
                    <div class="line-base">
                        <span class="title">地址</span>
                        <input class="content" id="lora-addr" maxlength="5" type="text"/>
                        <span>范围:0-65535</span>
                    </div>
                    <div class="line-base">
                        <span class="title">信道</span>
                        <input class="content" id="lora-channel" maxlength="2" type="text"/>
                        <span>范围:0-31,对应410~441MHz</span>
                    </div>
                    <div class="line-base">
                        <span class="title">空中速率</span>
                        <select class="content" id="select-lora-speed">
                            <option value="0">0.3k</option>
                            <option value="1">1.2k</option>
                            <option value="2" selected>2.4k</option>
                            <option value="3">4.8k</option>
                            <option value="4">9.6k</option>
                            <option value="5">19.2k</option>
                        </select>
                    </div>
                    <div class="line-base">
                        <span class="title">发射功率</span>
                        <select class="content" id="select-lora-power">
                            <option value="0" selected>33dBm</option>
                            <option value="1">30dBm</option>
                            <option value="2">27dBm</option>
                            <option value="3">24dBm</option>
                        </select>
                    </div>
                    <div class="line-base-btn">
                        <button class="" onclick="setLoraConfig()">保存</button>
                    </div>
                </div>
            </div>

            <div class="page-content" id="dateShow">
                <div class="page-title">SNTP服务</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">启用</span>
                        <input type="checkbox" id="sntp-enable"></checkbox>
                    </div>
                    <div class="line-base-btn">
                        <button class="" onclick="setSNTPConfig()">保存</button>
                    </div>
                </div>
                <div class="page-title">手动设置时间</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">日期</span>
                        <input type="date" id="dateInput">
                        <span class="title">时间</span>
                        <input type="time" id="timeInput">
                    </div>
                    <div class="line-base-btn">
                        <button class="" onclick="setDateTime()">保存</button>
                    </div>
                </div>
            </div>

            <div class="page-content" id="ioShow">
                <div class="page-title">DI 数字输入</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">DI-01</span>
                        <label class="switch readonly">
                            <input type="checkbox" id="diStatus01">
                            <span class="slider"></span>
                        </label>
                        <span class="title">DI-02</span>
                        <label class="switch readonly">
                            <input type="checkbox" id="diStatus02">
                            <span class="slider"></span>
                        </label>
                        <span class="title">DI-03</span>
                        <label class="switch readonly">
                            <input type="checkbox" id="diStatus03">
                            <span class="slider"></span>
                        </label>
                        <span class="title">DI-04</span>
                        <label class="switch readonly">
                            <input type="checkbox" id="diStatus04">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>

                <div class="page-title">DO 数字输出</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">DO-01</span>
                        <label class="switch">
                            <input type="checkbox" id="doStatus01" onclick="setDOStatus('do01',this)">
                            <span class="slider"></span>
                        </label>
                        <span class="title">DO-02</span>
                        <label class="switch">
                            <input type="checkbox" id="doStatus02"  onclick="setDOStatus('do02',this)">
                            <span class="slider"></span>
                        </label>
                        <span class="title">DO-03</span>
                        <label class="switch">
                            <input type="checkbox" id="doStatus03"  onclick="setDOStatus('do03',this)">
                            <span class="slider"></span>
                        </label>
                        <span class="title">DO-04</span>
                        <label class="switch">
                            <input type="checkbox" id="doStatus04"  onclick="setDOStatus('do04',this)">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>

                <div class="page-title">AI 模拟输入</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">AI-01</span>
                        <span id="aiStatus01">0</span>
                        <span>mA</span>
                    </div>
                    <div class="line-base">
                        <span class="title">AI-02</span>
                        <span id="aiStatus02">0</span>
                        <span>mA</span>
                    </div>
                    <div class="line-base">
                        <span class="title">AI-03</span>
                        <span id="aiStatus03">0</span>
                        <span>mA</span>
                    </div>
                </div>
                <div class="page-title">其它</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">温度传感器</span>
                        <span id="ntcTemp">0</span>
                        <span>℃</span>
                    </div>

                    <div class="line-base">
                        <span class="title">电池电压</span>
                        <span id="batVoltage">0</span>
                        <span>V</span>
                    </div>

                    <div class="line-base">
                        <span class="title">电源状态</span>
                        <span id="powerSource"></span>
                    </div>
                </div>
            </div>

            <div class="page-content scrollable-container"  id="cidsShow">
                <div class="page-title">公共参数配置</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">节点名称</span>
                        <select id="cids-select-node" onchange="subdevGetCids()">
                            <option value="n0">n0</option>
                            <option value="n1">n1</option>
                            <option value="n2">n2</option>
                            <option value="n3">n3</option>
                            <option value="n4">n4</option>
                            <option value="n5">n5</option>
                            <option value="n6">n6</option>
                            <option value="n7">n7</option>
                            <option value="n8">n8</option>
                            <option value="n9">n9</option>
                        </select>
                    </div>

                    <div class="line-base">
                        <span class="title">协议类型</span>
                        <select id="cids-select-protocol" onchange="cidsProtocolChange()">
                            <option value="NONE">NONE</option>
                            <option value="ModbusRTU">ModbusRTU</option>
                            <option value="ModbusASCII">ModbusASCII</option>
                            <option value="ModbusTCP">ModbusTCP</option>
                            <option value="ModbusUDP">ModbusUDP</option>
                            <option value="DLT645-07">DLT645-07</option>
                            <option value="DLT645-97">DLT645-97</option>
                            <option value="CJT188-04">CJT188-04</option>
                        </select>
                    </div>
                    <div class="line-base" id="cids-select-serial-wrap">
                        <span class="title">串口序号</span>
                        <select id="cids-select-serial">
                            <option value="0">0</option>
                            <option value="1">1</option>
                        </select>
                    </div>
                    <div class="line-base" id="cids-select-slave-addr-wrap">
                        <span class="title">从机IP地址</span>
                        <textarea id="cids-slave-addr" cols="50" rows="2"></textarea>
                    </div>
                    <div class="line-base" id="cids-select-slave-port-wrap">
                        <span class="title">从机端口</span>
                        <input id="cids-slave-port" maxlength="16" type="text" placeholder="502" />
                    </div>
                    <div class="line-base">
                        <span class="title">查询间隔</span>
                        <input id="cids-poll-interval" maxlength="16" type="number" placeholder="100" />
                        <span>mS</span>
                    </div>

                </div>

                <div class="page-title">添加CID</div>
                <div class="page-detail">
                    <div class="line-base">
                        <span class="title">CID</span>
                        <input id="add-cid-id"></input>
                        <span class="title">数据类型</span>
                        <select id="add-cid-data-type">
                            <option value="u16">u16</option>
                            <option value="i16">i16</option>
                            <option value="u32">u32</option>
                            <option value="i32">i32</option>
                            <option value="float">float</option>
                            <option value="u32CDAB">u32CDAB</option>
                            <option value="i32CDAB">i32CDAB</option>
                            <option value="fCDAB">floatCDAB</option>
                            <option value="string">string</option>
                        </select>
                        <span class="title">系数</span>
                        <input id="add-cid-factor" type="number" value="1"></input>
                        <span class="title">上报周期</span>
                        <input id="add-cid-max-inr" type="number"  value="0"></input>
                        <span class="title">变化阈值</span>
                        <input id="add-cid-change-val" type="number"  value="1"></input>
                        <button id="add-cid-add-btn" onclick="addCidToCidsList()">
                            添加
                        </button>
                    </div>
                    <!-- <div class="line-base">
                        <div><span>CID格式:</span></div>
                        <div><span>DLT645-07:12位表地址!8位数据标识</span></div>
                        <div><span>DLT645-97:12位表地址!4位数据标识</span></div>
                        <div><span>CJT188-04:14位表地址!4位数据标识</span></div>
                        <div><span>Modbus:地址!寄存器地址</span></div>
                    </div> -->
                </div>
                <div class="line-base">
                    <button onclick="getSubdevCidStatus()" class="">
                        查询数据
                    </button>
                    <button onclick="subdevSetCids()" class="">
                        保存并应用
                    </button>
                </div>
                <div class="page-title">CID信息</div>
                <div class="page-detail">
                    <div class="line-base">
                        <div id="cids-addr-wrap">
                            <form id="cids-addr-form">

                            </form>
                        </div>
                    </div>
                </div>
                <div class="line-base">
                    <button onclick="getSubdevCidStatus()" class="">
                        查询数据
                    </button>
                    <button onclick="subdevSetCids()" class="">
                        保存并应用
                    </button>
                </div> 
            </div>

            <div class="page-content scrollable-container" id="debugShow">
                <div class="page-title">调试步骤:选择命令类型->生成命令->发送命令</div>
                <div class="page-detail">
                    <div class="line-base">
                        <div id="debug-select-request-wrap">
                            <span class="title">命令</span>
                            <select id="debug-select-request" onchange="selectDeviceDebugType()">
                                <option value="get_device_info">获取设备信息</option>
                                <option value="device_get_status">读设备数据</option>
                                <option value="device_set_status">写设备数据</option>
                                <option value="reboot">设备重启</option>
                                <option value="reset">设备重置</option>
                                <option value="subdev_get_cids">获取子设备信息</option>
                                <option value="subdev_set_cids">设置子设备信息</option>
                                <option value="subdev_get_data">读子设备数据</option>
                                <option value="subdev_set_data">写子设备数据</option>
                                <option value="dlt645_set_addr">DLT645-设置表地址</option>
                                <option value="dlt645_get_addr">DLT645-读表地址</option>
                                <option value="dlt645_set_baudrate">DLT645-设置波特率</option>
                                <option value="dlt645_reset">DLT645-电表清零</option>
                                <option value="dlt645_set_onoff">DLT645-控制开关</option>
                                <option value="device_get_event">获取事件</option>
                                <option value="device_get_scenes">获取场景</option>
                            </select>
                        </div>                        

                        <div id="debug-select-node-wrap">
                            <span class="title">节点序号</span>
                            <select id="debug-select-node">
                                <option value="n0">n0</option>
                                <option value="n1">n1</option>
                                <option value="n2">n2</option>
                                <option value="n3">n3</option>
                                <option value="n4">n4</option>
                                <option value="n5">n5</option>
                                <option value="n6">n6</option>
                                <option value="n7">n7</option>
                                <option value="n8">n8</option>
                                <option value="n9">n9</option>
                            </select>
                        </div>

                        <div id="debug-select-protocol-wrap">
                            <span class="title">协议类型</span>
                            <select id="debug-select-protocol">
                                <option value="NONE">NONE</option>
                                <option value="ModbusRTU">ModbusRTU</option>
                                <option value="ModbusASCII">ModbusASCII</option>
                                <option value="ModbusTCP">ModbusTCP</option>
                                <option value="ModbusUDP">ModbusUDP</option>
                                <option value="DLT645-07">DLT645-07</option>
                                <option value="DLT645-97">DLT645-97</option>
                                <option value="CJT188-04">CJT188-04</option>
                            </select>
                        </div>

                        <div id="debug-select-serial-wrap">
                            <span class="title">串口序号</span>
                            <select id="debug-select-serial">
                                <option value="0">0</option>
                                <option value="1">1</option>
                            </select>
                        </div>
                        <div id="debug-slave-addr-wrap">
                            <span class="title">从机地址</span>
                            <textarea id="debug-slave-addr" cols="50" rows="2" placeholder="ip1,ip2" ></textarea>
                        </div>
                        <div id="debug-slave-port-wrap">
                            <span class="title">从机端口</span>
                            <input id="debug-slave-port" maxlength="16" type="text" placeholder="502" />
                        </div>
                        <div id="debug-subdev-addr-wrap">
                            <span class="title">子设备地址</span>
                            <textarea id="debug-subdev-addr" cols="50" rows="5" placeholder="addr1,addr2"></textarea>
                        </div >
                        
                        <div id="debug-subdev-data-id-wrap">
                            <span class="title">数据标识</span>
                            <textarea id="debug-subdev-data-id" cols="50" rows="5" placeholder="id1,id2"></textarea>
                        </div >
                        
                        <div id="debug-subdev-data-type-wrap">
                            <span class="title">数据类型</span>
                            <select id="debug-subdev-data-type">
                                <option value="u16">u16</option>
                                <option value="i16">i16</option>
                                <option value="u32">u32</option>
                                <option value="i32">i32</option>
                                <option value="float">float</option>
                                <option value="u32CDAB">u32CDAB</option>
                                <option value="i32CDAB">i32CDAB</option>
                                <option value="fCDAB">floatCDAB</option>
                                <option value="string">string</option>
                            </select>
                        </div>
                        <div id="debug-subdev-data-value-wrap">
                            <span class="title">数据</span>
                            <input id="debug-subdev-data-value" maxlength="32" type="text"/>
                        </div>
                    </div>
                    <div class="line-base-btn">
                        <button id="debug-generate" onclick="generateDeviceRequest()" class="">
                            生成请求
                        </button>
                        <button id="debug-send" onclick="sendDeviceRequest()" class="">
                            发送请求
                        </button>
                    </div>

                    <div class="line-base">
                        <div><h4>请求内容</h4></div>
                        <textarea id="debug-req" cols="100" rows="20"></textarea>    
                    </div>
                    <div class="line-base">
                        <div><h4>响应</h4></div>
                        <textarea id="debug-resp" cols="100" rows="20"></textarea>  
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<script>
  initHash();
  window.addEventListener('hashchange', function() {
    initHash();
  })
</script>
</body>

</html>
